<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <!-- 标题部分 -->
      <el-form-item label="标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>

      <el-form-item label="内容" class="editor">
        <!-- 富文本 -->
        <VueEditor
          v-model="form.content"
          :useCustomImageHandler="true"
          @image-added="imaUpload"
        />
      </el-form-item>
      <!-- 活动性质 -->
      <el-form-item label="栏目">
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="categore in cateList"
            :key="categore.id"
            :label="categore.id"
            >{{ categore.name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <!-- 封面 使用图片墙处理 -->
      <el-form-item label="封面" class="upload">
        <el-upload
          :action="$axios.defaults.baseURL + '/upload'"
          :headers="{ Authorization: 'Bearer ' + token }"
          list-type="picture-card"
          :file-list="form.cover"
          :on-success="coverSuccess"
          :on-remove="coverRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <!-- 文章类型 -->
      <el-form-item label="类型">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">文章</el-radio>
          <el-radio :label="2">视频</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 导入富文本插件
import { VueEditor } from "vue2-editor";

export default {
  data() {
    return {
      token: localStorage.getItem("token"),
      cateList: [],
      checkList: [],
      form: {
        title: "",
        content: "",
        categories: [],
        cover: [],
        type: 1,
      },
    };
  },
  components: {
    VueEditor,
  },
  created() {
    // 根据url是否有id判断是新闻编辑还是新闻的发布
    if (this.$route.query.id) {
      // 有id是新闻的编辑
      //根据id 发送请求渲染页面
      this.$axios({
        url: "/post/" + this.$route.query.id,
      }).then((res) => {
        let newRes = res.data.data;
        // 改造数据变成组件可以显示的格式
        // 改造栏目分类 checkList=[ 1,2,3]
        this.checkList = newRes.categories.map((item) => {
          return (item = item.id);
        });
        // 改造图片匹配组件显示
        // 判断cover的url是否完整进行相应的处理
        if (newRes.cover[0].url.indexOf("http") == -1) {
          // 不是完整的地址就拼接处理完整的地址
          newRes.cover.map((cover) => {
            // 处理数组里所有不完整的图片的地址
            cover.url = this.$axios.defaults.baseURL + cover.url;
            // 由于图片显示是以uid为唯一的标识,但此时每张图片的uid是1，需要将id复制给uid
            cover.uid = cover.id;
            return cover;
          });
        }

        // 由于旧数据存在富文本不能识别的div标签,需要全局将div变成p标签
        newRes.content = newRes.content.replace(/div/g, "p");
        // console.log(res);
        // console.log(newRes, "newRes");
        // 将经过改造的后的新闻数据绑定到表单
        this.form = newRes;
      });
    }
    // 发送请求获取所有栏目
    this.$axios({
      url: "/category",
    }).then((res) => {
      // console.log(res);
      // 将获取的栏目过滤掉关注,头条和热门 先改造数据
      this.cateList = res.data.data.filter((categore) => {
        return categore.id != 0 && categore.id != 999 && categore.id != 1;
      });
    });
  },
  watch: {
    //*** */ 监听复选框的选项变化 改造数据绑定到表单的categories
    checkList() {
      // 将获取的复选框的数据 改造成符合请求文档的格式
      this.form.categories = this.checkList.map((item) => {
        return (item = {
          id: item,
        });
      });
      // console.log(this.form.categories, 12);
    },
  },
  methods: {
    onSubmit() {
      // console.log("点击提交");
      // 显示获取的form数据
      // console.log(this.form);
      // 发送请求 发布新闻
      this.$axios({
        method: "post",
        url: "/post",
        data: this.form,
      }).then((res) => {
        console.log(res);
        if (res.data.message == "文章发布成功") {
          // 提示发布成功
          this.$message.success("新闻发布成功");
          // 跳转到文章列表页面
          this.$router.push("/postlist");
        }
      });
    },
    // 监听图片墙的上传成功事件
    coverSuccess(res, file) {
      // console.log(res);
      // console.log(file);
      // res 响应的结果 file上传的图片本身
      // 改造表单的cover可以满足图片发送请求及上传图片显示 的格式
      // 将上传图片的id属性放到文件对象里 满足发送请求的格式
      file.id = res.data.id;
      // 将图片的文件对象放到表单的cover数组里 满足图片编辑的显示格式
      this.form.cover.push(file);
      // console.log(this.form.cover);
    },
    // 监听图片墙的图片删除事件
    coverRemove(file, fileList) {
      console.log(fileList);
      //file删除的图片  fileList删除后返回的当前的图片列表
      // console.log("图片删除成功");
      // 删除图片后将返回的图片列表数组绑定到表单的cover里
      this.form.cover = fileList;
    },
    // 监听富文本点击图片上传 触发的函数
    imaUpload(file, Editor, cursorLocation, resetUploader) {
      // console.log("手动处理图片上传");
      // console.log(file);
      // 使用FormData处理上传图片
      let data = new FormData();
      // FormData加入file属性
      data.append("file", file);
      // 发送请求上传图片
      this.$axios({
        method: "post",
        url: "/upload",
        data,
      }).then((res) => {
        // console.log(res);
        // 将获取成功的图片的url插入到富文本的img里面
        // 将图片插入到富文本编辑器光标的位置
        Editor.insertEmbed(
          cursorLocation,
          "image",
          this.$axios.defaults.baseURL + res.data.data.url
        );
        // 插入图片后复原上传组件
        resetUploader();
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-input__inner {
  width: 300px;
}
.quillWrapper {
  background-color: #fff;
}
.el-checkbox-group {
  padding-left: 30px;
  background-color: #fff;
}
.el-radio-group {
  width: 200px;
  background-color: #fff;
  padding: 12px 4px;
}
</style>
